<!--
 * @Author: 王灿
 * @Date: 2019-11-03 00:40:05
 * @LastEditTime: 2019-12-07 00:04:45
 * @Description: 用户操作
 * @FilePath: \scarlet-sparrow-admin\src\views\home\home-user\user-operate\index
-->
<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="realName">
        <el-row>
          <el-input v-model="ruleForm.realName" placeholder="请输入姓名" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item prop="realName">
        <el-row>
          <el-input v-model="ruleForm.mobile" type="tel" maxlength="11" placeholder="请输入手机号" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item prop="remark">
        <el-row>
          <el-input v-model="ruleForm.remark" type="tel" maxlength="11" placeholder="请输入备注" clearable></el-input>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
      <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { addUser, editUser } from '@/api/home.js'
  export default {
    name: 'UserOperate',
    props: {
      row: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        ruleForm: {
          id: '',
          realName: '',
          mobile: '',
          remark: '',
          status: 2
        },
        rules: {
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { parrent: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
          ],
          realName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ]
        }
      };
    },
    watch: {
      row() {
        this.onGetRow()
      }
    },
    created() {
      this.onGetRow()
    },
    methods: {
      // 默认数据
      onGetRow() {
        let boolean = JSON.stringify(this.row) !== '{}'
        this.ruleForm.id = boolean ? this.row.id : ''
        this.ruleForm.realName = boolean ? this.row.realName : ''
        this.ruleForm.mobile = boolean ? this.row.mobile : ''
        this.ruleForm.remark = boolean ? this.row.remark : ''
        this.ruleForm.status = boolean ? this.row.status : 2
      },
      // 提交
      onSubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.row.id) {
              // 编辑
              editUser(this.ruleForm).then( res => {
                this.$notify.success({
                    title: '提示',
                    message: '编辑成功'
                })
                this.onRefresh()
              })
            } else {
              // 新增
              addUser(this.ruleForm).then( res => {
                this.$notify.success({
                    title: '提示',
                    message: '创建成功'
                })
                this.onRefresh()
              })
            }
          }
        })
      },
      // 取消
      onCancelForm(formName) {
        this.$refs[formName].resetFields()
        let data = {isShow: false}
        this.$emit('addTableRow', data)
      },
      // 刷新页面
      onRefresh() {
        setTimeout( () => {
          let data = {isShow: false, isRefresh: true}
          this.$emit('addTableRow', data)
        }, 1000)
      }
    }
  }
</script>